<template>
  <div class="app-container">
    <div class="customContainer">
      <div class="op_list">
        <div class="op_title">
          活动信息
        </div>
        <div class="op_detail">
          <div class="op_detail_one">{{store_name}}</div>
          <div class="op_detail_one">活动名称： {{ list.name }}</div>
          <div>活动时间：{{ list.start_time }} - {{ list.end_time }}</div>
        </div>
      </div>
      <div class="op_list">
        <div class="op_title">
          员工管理
        </div>
        <div class="op_content op_content_o" style="width:75%;">
          <el-tag
            effect="plain"
            closable
            v-for="(item,i) in employeesList"
            :key="item"
            @close="removeEmployees(item,i)"
          >
            {{item}}
          </el-tag>
          <el-button type="primary" icon="el-icon-circle-plus-outline"  @click="addEmployees" size="mini">添加</el-button>
        </div>
      </div>
      <div class="op_list">
        <div class="op_title">
          二维码排班表
        </div>
        <div class="code_list">
          <div class="code_list_img" v-for="item in code_list" :key="item.id">
            <div>
              <div class="not_select" :class="{'select_code': code_id==item.id}"  @click="selectViewCode(item)">
                <vue-qr :text='links+"?storeId="+store_id+"&qrCode_id="+item.id+"&activeId="+activeId' :qid="item.id" :size="100" :margin="5"></vue-qr>
              </div>
            </div>
            <div>{{item.name}}</div>
          </div>
        </div>
        <div class="assigning_task">
          <div class="condition">
            <div class="data_condition">
                <el-date-picker
                v-model="currentMonth1"
                type="month"
                placeholder="选择月"
                format="yyyy-MM"
                value-format="yyyy-MM"
                @change = 'selectMonth'>
              </el-date-picker>  
            </div>
            <div class="time_tips">上午： 10:00 - 14:59</div>
            <div class="time_tips">下午： 15:00 - 20:00</div>
          </div>
          <div class="content">
            <div class="content_left">
              <div class="tables">
                <ul>
                  <li style="background: #ffffff;height: 40px;line-height: 36px;">星期</li>
                  <ul v-for="(item,index) in dataMaxLength" :key="index">
                    <li style="background: #e9eef6;">日期</li>
                    <li>上午</li>
                    <li>下午</li>
                  </ul>
                </ul>
                <ul v-for="(item,index) in dataArr" :key="index">
                  <li style="background: #ffffff;height: 40px;line-height: 36px">{{item.week}}</li>
                  <ul v-for="(items,i) in item.data" :key="i"  @click="addDate(items)">
                    <li style="background: #e9eef6;">{{ items.work_times }}</li>
                    <li :title="items.emp_name_am" :class="{'isGary': items.isUsable==false}">{{ items.emp_name_am }}</li>
                    <li :title="items.emp_name_pm" :class="{'isGary': items.isUsable==false}">{{ items.emp_name_pm }}</li>
                  </ul>
                </ul>
              </div>
            </div>
            <div class="content_right">
              <div>
                <div class="btn_status">
                  <div class="btn_title">批量排班</div>
                  <div v-if="allAdd">
                    <el-button size="mini" @click="updateStatusAll" type="primary">修改</el-button> 
                  </div>
                  <div v-else>
                    <el-button size="mini" @click="saveDateAll" type="primary">保存</el-button>
                    <el-button size="mini" @click="cancelStatusAll" type="primary" plain>取消</el-button>
                  </div>
                </div>
                <div class="op_content" :class="{'select_backgr':allAdd==true}">
                  <el-tag
                    effect="plain"
                    closable
                    v-for="(item,i) in selectTimeDateAll"
                    :key="item"
                    @close="removeSelectTimeDate(item,i)"
                  >
                    {{ item }}
                  </el-tag>
                </div>
                <div class="select_content">
                  <el-select v-model="selectTimeQuantum" placeholder="请选择时间" size="small" :disabled="allAdd">
                    <el-option
                      v-for="item in timeQuantum"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  <el-select v-model="selectEmployees" placeholder="请选择员工" size="small" :disabled="allAdd">
                    <el-option
                      v-for="item in employeesList"
                      :key="item"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="line"></div>
              <div>
                <div class="btn_status">
                  <div class="btn_title">单独排班</div>
                  <div v-if="aloneAdd">
                    <el-button size="mini" @click="updateStatusAlone" type="primary">修改</el-button> 
                  </div>
                  <div v-else>
                    <el-button size="mini" @click="saveDateAlone" type="primary">保存</el-button>
                    <el-button size="mini" @click="cancelStatusAlone" type="primary" plain>取消</el-button>
                  </div>
                </div>
                <div class="op_date">{{ aloneTimeShow }}</div>
                <div class="select_content">
                  <label>班次</label>
                  <el-select value="10" placeholder="请选择时间" size="small" disabled>
                    <el-option
                      key="10"
                      label="上午"
                      value="10">
                    </el-option>
                  </el-select>
                </div>
                <div class="select_content">
                  <label>人员</label>
                  <el-select v-model="selectEmployeesAm" placeholder="请选择员工" size="small" :disabled="aloneAdd">
                    <el-option
                      v-for="item in employeesList"
                      :key="item"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                </div>
                <div class="select_content">
                  <label>班次</label>
                  <el-select value="15" placeholder="请选择时间" size="small" disabled>
                    <el-option
                      key="15"
                      label="下午"
                      value="15">
                    </el-option>
                  </el-select>
                </div>
                <div class="select_content">
                  <label>人员</label>
                  <el-select v-model="selectEmployeesPm" placeholder="请选择员工" size="small" :disabled="aloneAdd">
                    <el-option
                      v-for="item in employeesList"
                      :key="item"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog  title="添加人员" :visible.sync="addEmployeesStatus" width="390px">
      <div class="main">
        <el-form :model="formdialog" :rules="rules" ref="formdialog">
          <el-form-item label="名字" prop="employeesName">
            <el-input type="text" v-model="formdialog.employeesName" style="width:88%"  placeholder="请输入二维码名称"></el-input>
          </el-form-item>
        </el-form>
        <div class="main_botton">
          <el-button  type="primary"  @click="closeDialoig()">取消</el-button>
          <el-button  type="primary"  @click="save()">保存</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  scheduling_list,
  scheduling_update,
  active_info
} from '@/api/operation/workingSchedule'
import {
 notCharmap
} from "@/utils/validate";
import VueQr from 'vue-qr'
export default {
   name: 'working_schedule',
  components: {
      VueQr
  },
  data() {
    const vName = (rule, value, callback) => {
      if (value.length<1 || value.length>15) {
        callback(new Error("请输入最多15个字"));
      } else {
        if (!notCharmap(value)) {
          callback(new Error("名称不能包含特殊字符"));
        } else {
          callback();
        }
      }
    };
    return {
      links:"",
      store_name:'', //名店名称
      store_id:'', //门店id
      list:{},//上个页面传过来的数据
      activeId:'', // 活动id
      code_list:[], // 二维码数据
      code_id:'', //二维码id
      employeesList:[],//员工管理  姓名数据
      addEmployeesStatus:false, // 员工管理 添加姓名弹窗是否显示
      formdialog:{
        employeesName:'', // 员工管理 添加姓名弹窗输入框数据
      },
      rules: { // 员工管理 添加姓名弹窗输入框进行表单验证
        employeesName: [{ required: false, validator: vName, trigger: "blur" }],
      },
      dataArr:[], //排班表展示的数据
      dataMaxLength:'', // 排班表最大长度
      currentMonth: '', //当前页面 -- 排班表筛选条件
      currentMonth1:'',
      timeQuantum:[
        {id:'10:00',value:'10',label:'上午'},
        {id:'15:00',value:'15',label:'下午'},
      ], // 修改排班表时,上午下午选择框提供选择的数据
      allAdd:true, // 是否修改排班表--批量  true不进行修改，按钮显示修改   false进行修改,显示保存取消按钮
      selectTimeDateAll:[], // 修改排班表时,点击选择日期 -- 批量
      selectTimeQuantum:'10',//修改排班表时,选择上午还是下午 -- 批量
      selectEmployees:'', //修改排班表时,选择员工  -- 批量
      aloneAdd:true,// 是否修改排班表 -- 单独  true不进行修改，按钮显示修改   false进行修改,显示保存取消按钮
      aloneTimeShow:'', // 单独时间选择--展示在页面
      aloneTime:'', // 单独时间选择
      selectEmployeesAm:'', // 修改排班表时,选择员工  时间上午(以am为结束) -- 单独
      selectEmployeesPm:'', // 修改排班表时,选择员工  时间下午(以pm为结束) -- 单独
    };
  },
  activated(){
    this.links =   location.host.split(':')[0] == 'scfy.i3020.com' ? `https://${location.host}/sms/#/boon/`:`http://dev.hahaipi.com/sms/#/boon/`;
    if(this.$route.params.id){
      this.store_name=this.$route.params.name;
      this.store_id=this.$route.params.id;
      this.list = this.$route.params.list;
      this.activeId = this.$route.params.list.id;
      this.code_list = this.$route.params.list.qr_code;
      this.code_id=this.code_list[0].id;
      let time = new Date().getFullYear()+ '-' + (new Date().getMonth()+1);
      this.currentMonth = time;
      this.currentMonth1 = time;
      this.workingScheduleDate();
    }
  },
  methods:{
    //选择二维码
    selectViewCode(data){
      if(!this.allAdd || !this.aloneAdd){
        this.$message.error("正在进行修改排班不能切换二维码")
      }else{
        this.code_id = data.id;
        this.workingScheduleDate();
      }
    },
    //员工管理 添加姓名  显示添加弹窗
    addEmployees(){
      this.addEmployeesStatus = true;
    },
    //员工管理 添加姓名  关闭添加弹窗
    closeDialoig(){
      this.addEmployeesStatus = false;
      this.formdialog.employeesName = '';
    },
    //员工管理 添加姓名  添加弹窗保存功能
    save(){
      this.$refs["formdialog"].validate((valid) => {
        if (valid) {
          try{
            if(this.employeesList.length>0){
              let data = this.employeesList;
              data.forEach(item => {
                if(item == this.formdialog.employeesName){
                  this.$message.error('名字不可重复');
                  throw Error();
                }
              })
              this.employeesList.push(this.formdialog.employeesName)   
            }else{
              this.employeesList.push(this.formdialog.employeesName)
            }
            this.addEmployeesStatus = false;
            this.formdialog.employeesName = '';
          }catch(e){
            console.log(e)
          }
        }
      })
    },
    // 员工管理 移除已经添加的员工
    removeEmployees(data,i){
      this.employeesList.forEach(item => {
        if(item == data){
          this.employeesList.splice(i,1)
        }
      })
    },
    // 选择日期
    selectMonth(val){
      if(!this.allAdd || !this.aloneAdd){
        this.currentMonth1 = this.currentMonth;
        this.$message.error("正在进行修改排班不能切换月份");
      }else{
        this.currentMonth = val;
        this.currentMonth1 = val;
        this.workingScheduleDate()
      }
    },
    // 排班表数据接口
    workingScheduleDate(){
      let _self = this;
      scheduling_list({
        date_time: this.currentMonth,
        store_id: this.store_id,
        activity_id:this.activeId,
        qr_code_id: this.code_id
      }).then(res => {
        let data = res.data;
        let arr = [];
        // 判断某一项数据的时间是属于上午还是属于下午
        data.forEach(item => {
          if(item.work_time.includes('10:00:00')){
            item.classes="am"
          }else{
            item.classes="pm"
          }
        })
        //将相同日期(年月日)的数据整理到一起
        let weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];//判断当天是星期几
        data.forEach((item,i) => {
          if(i<data.length-1){
            if(item.work_time.toString().split(' ')[0] == data[i+1].work_time.toString().split(' ')[0]){
              arr.push({
                emp_name_am : item.emp_name,
                emp_name_pm : data[i+1].emp_name,
                work_time : item.work_time,
                work_times : item.work_time.toString().split(' ')[0].substring(5),
                weeks : weeks[new Date(item.work_time).getDay()],//判断当天是星期几
                classes_am : item.classes,
                classes_pm : data[i+1].classes
              })
            }
          }
        });
        //判断每月的第一天是星期几,进行补位
        let firstDataWeek = new Date(data[0].work_time).getDay();
        if(firstDataWeek == 0){
          arr = _self.getDateCoverage(7,arr,weeks,data,1);
        }else{
          arr = _self.getDateCoverage(firstDataWeek,arr,weeks,data,1);
        }

        let lastDataWeek = new Date(data[data.length-1].work_time).getDay();
        if(lastDataWeek == 0){
          arr = this.getDateCoverage(7,arr,weeks,data,2);
        }else{
          arr = this.getDateCoverage(lastDataWeek,arr,weeks,data,2);
        }

        //判断当前日期是否为在活动期限内
        arr.forEach(item => {
          let time = new Date(item.work_time.toString().split(' ')[0]).getTime();
          if(item.work_time == ''||time < new Date(this.list.start_time).getTime() || time > new Date(this.list.end_time).getTime()){
            item.isUsable = false;
          }else{
            item.isUsable = true;
          }
        })
        //将星期作为条件整理数据-- 如星期一的放在一个数组中
        let dataArr = [
          {
            week: '星期一',
            data:[]
          },
          {
            week: '星期二',
            data:[]
          },
          {
            week: '星期三',
            data:[]
          },
          {
            week: '星期四',
            data:[]
          },
          {
            week: '星期五',
            data:[]
          },
          {
            week: '星期六',
            data:[]
          },
          {
            week: '星期日',
            data:[]
          }
        ];
        arr.forEach(item => {
          switch(item.weeks){
            case '星期一' :  
              dataArr[0].data.push(item);
              break;
            case '星期二' :  
              dataArr[1].data.push(item);
              break;
            case '星期三' :  
              dataArr[2].data.push(item);
              break;
            case '星期四' :  
              dataArr[3].data.push(item);
              break;
            case '星期五' :  
              dataArr[4].data.push(item);
              break;
            case '星期六' :  
              dataArr[5].data.push(item);
              break;
            case '星期日' :  
              dataArr[6].data.push(item);
              break;
          }
        })
        this.dataMaxLength = dataArr[0].data.length;
        this.dataArr = dataArr;
      })
    },
    getDateCoverage(index,arr,weeks,data,p){ //日期补位的数据 index-前几天  arr-将相同日期(年月日)的数据整理后的数据  week-星期数组 data-数据接口返回的原始数据-未对数据进行操作
      if(p==1){
        for(let i=1; i<index; i++){
          arr.unshift({
            emp_name_am : '',
            emp_name_pm : '',
            work_time : '',
            work_times:'',
            weeks : weeks[new Date(this.getBeforeDate(data[0].work_time,i)).getDay()],//判断当天是星期几
            classes_am : '',
            classes_pm : ''
          })
        }
        return arr;
      }else {
        for(let i=1; i<= (7-index); i++){
          arr.push({
            emp_name_am : '',
            emp_name_pm : '',
            work_time : '',
            work_times:'',
            weeks : weeks[new Date(this.getBeforeDate1(data[data.length-1].work_time,i)).getDay()],//判断当天是星期几
            classes_am : '',
            classes_pm : ''
          })
        }
        return arr;
      }
    },
    getBeforeDate(currentDay,days){ // 获取几天前的日期   currentDay-传入的起始时间  days-时间间隔几天前
      var now=new Date(currentDay).getTime();
      var ago=now-86400000*days;//一天的毫秒数为86400000
      var agoData= new Date(ago);
      var year = agoData.getFullYear();
      var mon = agoData.getMonth() + 1;
      var day = agoData.getDate();
      mon=mon<10? '0'+mon:mon;
      day=day<10? '0'+day:day;
      var date=year+'-'+mon+'-'+day;
      return date;
    },
    getBeforeDate1(currentDay,days){ // 获取几天前的日期   currentDay-传入的起始时间  days-时间间隔几天前
      var now=new Date(currentDay).getTime();
      var ago=now+86400000*days;//一天的毫秒数为86400000
      var agoData= new Date(ago);
      var year = agoData.getFullYear();
      var mon = agoData.getMonth() + 1;
      var day = agoData.getDate();
      mon=mon<10? '0'+mon:mon;
      day=day<10? '0'+day:day;
      var date=year+'-'+mon+'-'+day;
      return date;
    },
    // 显示批量修改
    updateStatusAll(){
      this.allAdd = false;
    },
    // 取消批量修改
    cancelStatusAll(){
      this.allAdd = true;
      this.selectTimeDateAll.length = 0;
      this.selectTimeQuantum = '';
      this.selectEmployees = ''
    },
    // 点击排班表 添加时间
    addDate(data){
      if(data.work_time == ''){
        return ;
      }
      if(!data.isUsable){
        return
      }
      if(!this.allAdd){
        try{
          let time = data.work_time.toString().split(' ')[0];
          if(this.selectTimeDateAll.length>0){
            this.selectTimeDateAll.forEach(item => {
              if( time == item ){
                this.$message.error('当前选择的时间已经选择了,请选择其他时间');
                throw Error();
              }
            })
            this.selectTimeDateAll.push(time)
          }else{
            this.selectTimeDateAll.push(time)
          }
        }catch(e){
          console.log(e)
        }
      }else if(!this.aloneAdd){
        let time = data.work_time;
        let week = '';
        switch(new Date(time).getDay()){
          case 0 : week = '日'; break;
          case 1 : week = '一'; break;
          case 2 : week = '二'; break;
          case 3 : week = '三'; break;
          case 4 : week = '四'; break;
          case 5 : week = '五'; break;
          case 6 : week = '六'; break;
        }
        this.aloneTimeShow= new Date(time).getFullYear()+'年'+(new Date(time).getMonth()+1)+'月'+ new Date(time).getDate()+'日'+'周'+week
        this.aloneTime = data.work_time.toString().split(' ')[0];
        this.selectEmployeesAm = data.emp_name_am;
        this.selectEmployeesPm = data.emp_name_pm;
      }
      
    },
    // 移除通过点击排班表添加的时间
    removeSelectTimeDate(data,i){
      this.selectTimeDateAll.forEach(item => {
        if(item == data){
          this.selectTimeDateAll.splice(i,1)
        }
      })
    },
    // 提交修改-批量
    saveDateAll(){
      if(this.selectTimeDateAll.length == 0){
        this.$message.error('请点击排班表,选择日期');
         return ;
      }
      if(this.selectEmployees == ''){
        this.$message.error('请选择人员,若选择项中没有人员,请在员工管理添加');
         return ;
      }
      let start_time = this.list.start_time;
      let end_time = this.list.end_time;
      let day = new Date(end_time).getDate() - new Date(start_time).getDate()+1;
      if(this.selectTimeDateAll.length!=day){
        this.$confirm('活动期间内有未排班日期，请全部排班后再保存', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          let json_list = [];
          this.selectTimeDateAll.forEach(item => {
            if(this.selectTimeQuantum == 10){
              json_list.push({
                emp_name: this.selectEmployees,
                work_time: item+' 10:00:00'
              })
            }else if(this.selectTimeQuantum == 15){
              json_list.push({
                emp_name: this.selectEmployees,
                work_time: item+' 15:00:00'
              })
            }
          })
          let data = {
            store_id:this.store_id,
            activity_id: this.activeId,
            qr_code_id: this.code_id,
            json_list:JSON.stringify(json_list)
          }
          scheduling_update(data).then(res => {
            if(res.code == 1){
              this.$message({
                message: '保存成功',
                type: 'success'
              });
              this.workingScheduleDate();
              this.cancelStatusAll();
            }
          })
        }).catch(() => {
                 
        });
      }else{
        let json_list = [];
        this.selectTimeDateAll.forEach(item => {
          if(this.selectTimeQuantum == 10){
            json_list.push({
              emp_name: this.selectEmployees,
              work_time: item+' 10:00:00'
            })
          }else if(this.selectTimeQuantum == 15){
            json_list.push({
              emp_name: this.selectEmployees,
              work_time: item+' 15:00:00'
            })
          }
        })
        let data = {
          store_id:this.store_id,
          activity_id: this.activeId,
          qr_code_id: this.code_id,
          json_list:JSON.stringify(json_list)
        }
        scheduling_update(data).then(res => {
          if(res.code == 1){
            this.$message({
              message: '保存成功',
              type: 'success'
            });
            this.workingScheduleDate();
            this.cancelStatusAll();
          }
        })
      }
    },
    // 显示单独修改
    updateStatusAlone(){
      this.aloneAdd = false
    },
    // 取消单独修改
    cancelStatusAlone(){
      this.aloneAdd = true;
      this.selectEmployeesAm = '';
      this.selectEmployeesPm = '';
    },
    // 提交修改-单独
    saveDateAlone(){
      if(this.aloneTime == ''){
        this.$message.error('请点击排班表,选择日期');
        return ;
      }
      if(this.selectEmployeesAm == '' || this.selectEmployeesPm == ''){
        this.$message.error('请选择人员,若选择项中没有人员,请在员工管理添加');
        return ;
      }
      let json_list = [];
      json_list.push({
        emp_name: this.selectEmployeesAm,
        work_time: this.aloneTime+' 10:00:00'
      },{
        emp_name: this.selectEmployeesPm,
        work_time: this.aloneTime+' 15:00:00'
      })
      let data = {
        store_id:this.store_id,
        activity_id: this.activeId,
        qr_code_id: this.code_id,
        json_list:JSON.stringify(json_list)
      }
      scheduling_update(data).then(res => {
        if(res.code == 1){
          this.$message({
            message: '保存成功',
            type: 'success'
          });
          this.workingScheduleDate();
          this.cancelStatusAlone();
        }
      })
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.app-container{
  .customContainer{
    overflow: auto;
    background-color: #fff;
    .op_list{
      .op_title{
        margin: 30px 0 20px;
        padding-bottom: 5px;
        font-size: 16px;
        font-weight: bold;
        color: #282828;
        border-bottom: 1px solid #dcdfe6;
      }
      .op_detail{
        display: flex;
        .op_detail_one{
          margin-right: 70px;
        }
      }
      .op_content{
        padding: 10px;
        width: 480px;
        height: 120px;
        overflow-y: auto;
        border: 1px solid #DCDFE6;
        cursor: default;
        .el-tag{
          margin:0 10px 10px 0;
        }
        .el-icon-plus{
          cursor: pointer;
        }
      }
      .op_content_o{
        height: 90px;
      }
      .select_backgr{
        border: 1px solid #F5F7FA;
        background-color: #f5f7fa;
        cursor: not-allowed;
      }
      .code_list{
        display: flex;
        .code_list_img{
          margin-right: 20px;
          width: 110px;
          /*height: 100px;*/
          .not_select{
            opacity: .5;
          }
          .select_code{
            opacity: 1;
          }
          .el-image{
            width: 100%;
            height: 100%;
          }
          .select_code{
            margin-bottom: 5px;
          }
        }
      }
      .assigning_task{
        margin-top: 20px;
        .condition{
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          .data_condition{
            margin-right: 20px;
          }
          .time_tips{
            margin-right: 20px;
          }
        }
        .content{
          display: flex;
          .content_left{
            margin-right: 30px;
            .tables{
              display: flex;
              ul{
                padding: 0;
                margin: 0;
                .isGary{
                  background-color: #f5f7fa;
                  cursor: not-allowed;
                }
                li{
                  list-style: none;
                  padding: 2px;
                  margin: 0;
                  width: 85px;
                  height: 35px;
                  text-align: center;
                  line-height: 32px;
                  border: 1px solid #E4E7ED;
                  font-size: 14px;
                  cursor: default;
                  overflow: hidden;
                  text-overflow:ellipsis;
                  white-space: nowrap;
                }
              }
            }
          }
          .content_right{
            .line{
              margin: 30px 0;
              border: 1px solid #dcdfe6;
            }
            .btn_status{
              display: flex;
              align-items: center;
              margin-bottom: 10px;
              .btn_title{
                margin-right: 15px;
              }
            }
            .select_content{
              margin-top: 10px;
              label{
                display:inline-block;
                margin-right: 15px;
              }
              .el-select{
                margin-right: 15px;
                width: 140px;
              }
            }
          }
        }
      }
    }
  }
  .main_botton{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
  }
}
</style>